import React, { useState, useEffect, useRef } from 'react';
import { Card, Form, Button, Divider, Row, Col, Input, InputNumber, Select, Spin } from 'antd';
import PubSub from 'pubsub-js';
import { connect } from 'dva';
import RuleComponent from './RuleComponent';
import FooterToolbar from '@/components/FooterToolbar';

function AddStatusFlow({ size: { height }, goToStep, operType, planInfo }) {
  const userEl = useRef(null);

  return (
    <div>
      <Card title="新增规则" style={{ minHeight: height, paddingBottom: 40 }}>
        <RuleComponent
          operType={operType}
          planInfo={planInfo}
          ruleId=""
          ref={userEl}
          cRef={userEl}
        />
      </Card>
      <FooterToolbar>
        <Button
          type="primary"
          onClick={() => {
            userEl.current.handleAdd().then(res => {
              if (res === true) {
                // 新增完需做两个动作：菜单栏数据的更新 ，方案下规则管理列表的刷新
                PubSub.publish(`ruleConfig_tree.update`);
                PubSub.publish(`ruleConfig_planTable.update`);
                goToStep(1);
              }
            });
          }}
        >
          确定
        </Button>
        <Button type="default" onClick={() => goToStep(1)}>
          返回
        </Button>
      </FooterToolbar>
    </div>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Form.create()(AddStatusFlow));
